let postfixList = ["163.com"];
let ouser = document.querySelector(".user");
let sug = document.getElementById("email-sug-wrapper");
let oclose1 = document.querySelector(".close1");
let oclose2 = document.querySelector(".close2");
let opsd = document.querySelector(".password")
let nowSelectTipIndex = 0;
// 下一步next-step
let nextStep = document.querySelector(".next-step");
let otips1 = document.querySelector(".tips1");
let otips2 = document.querySelector(".tips2");
let oeye1 = document.querySelector(".psd #eye1");
let ocheck = document.querySelector("#check");






// 点击叉叉清空内容
oclose1.onclick = function () {
    ouser.value = null;
    sug.style.display = "none";
    opsd.value = null;
    otips1.innerHTML = null;
    otips2.innerHTML = null;

}
oclose2.onclick = function () {

    opsd.value = null;
    opsd.value = null;
    otips2.innerHTML = null;

}

// //获取输入文本
// ouser.oninput = function (e) {

//     //按下的是内容，则重置选中状态，坐标清零，避免光标位置已经计算存入。
//     judge();
//     add();

// }
ouser.addEventListener("input", (e) => {
    judge();
    add();



})
//点击事件响应
sug.addEventListener("click", function (ev) {
    //采用事件代理，监听父级点击事件，通过target获取当前li
    const eve = ev || window.event;
    let target = eve.target || eve.srcElement;
    if (target.nodeName.toLowerCase() == "li") {
        hide();
        ouser.focus(); //写在return之前，不然无效
        return ouser.value = htmlDecode(target.innerHTML); //解码
        //return ouser.value= target.innerHTML;
    }
})

//获取输入内容，并去除首尾空格
function getText() {
    let inputText = ouser.value/* .trim() */;
    return inputText;
}
//判断是否生成新的数组
function postlist() {
    let userinput = getText();
    let newpostlist = new Array();
    if (userinput.search('@') != 0) {
        let len = userinput.search('@');
        //用来拼接的用户输入内容 = 只使用@之后的字符串
        let x = userinput.substring(len + 1, userinput.length); //取@之后的部分
        for (let i = 0; i < postfixList.length; i++) {
            if (postfixList[i].search(x) == 0) {
                newpostlist.push(postfixList[i]);
            }
        }
        //若@后面没有字符或者新数组newpostlist为空，就返回原来的postfixlist
        if (x === '' || newpostlist == '') {
            return postfixList;
        }
        return newpostlist;
    } else {
        return postfixList;
    }
}
//根据输入内容和匹配来生成提示数组
function promptContent() {
    let x = htmlEncode(getText()); //转码;
    // let x=getText();
    let tips = new Array();
    if (x.indexOf("@") != -1) {
        let p = x.slice(0, x.indexOf("@"));
        for (i = 0; i < postlist().length; i++) {
            tips[i] = p + "@" + postlist()[i];
        }
    } else {
        for (i = 0; i < postfixList.length; i++) {
            tips[i] = x + "@" + postfixList[i];
        }
    }
    return tips;
}
//添加提示数组进入li
function add() {
    let sug = document.getElementById("email-sug-wrapper");
    let tips = promptContent();
    while (sug.hasChildNodes()) {
        sug.removeChild(sug.firstChild);
    }
    //将之前的列表清除掉，然后重新生成新的列表
    for (i = 0; i < tips.length; i++) {
        let tip_li = document.createElement("li");
        tip_li.innerHTML = tips[i];
        sug.appendChild(tip_li);
    }
    //初始选择第一项为选中状态，加类名变粉色（需要生成li之后再调用）。
    let list = document.getElementsByTagName("li");
    list[0].setAttribute("class", "active");
}

function judge() {
    //判空，是“”没有内容，不能为“　”
    if (getText() == "") {
        hide();
    } else {
        display();
    }

}
//控制提示列表隐藏
function hide() {
    sug.style.display = "none";
}
//控制提示列表显示
function display() {
    sug.style.display = "block";
}
/*1.用浏览器内部转换器实现html转码*/
function htmlEncode(html) {
    //1.首先动态创建一个容器标签元素，如DIV
    let temp = document.createElement("div");
    //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
    (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
    //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
    let output = temp.innerHTML;
    temp = null;
    return output;
}
/*2.用浏览器内部转换器实现html解码*/
function htmlDecode(text) {
    //1.首先动态创建一个容器标签元素，如DIV
    let temp = document.createElement("div");
    //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
    temp.innerHTML = text;
    //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
    let output = temp.innerText || temp.textContent;
    temp = null;
    return output;
}



// 邮箱名密码正则验证
let unFlag, pwFlag, ckFlag;
unFlag = pwFlag = ckFlag = false;

document.addEventListener("click", function () {
    let str = ouser.value;
    let reg = /^[1-9]\d{2,13}@[1-9]{3}\.[a-z]{2,3}$/;
    if (str.length !== 0) {
        if (reg.test(str)) {
            otips1.innerHTML = "完成";
            otips1.style.color = "#2c82ff";
            unFlag = true;
        } else {
            otips1.innerHTML = "账号需由10-20个字符组成(@之前为纯数字），请重新修改";
            otips1.style.color = "red";
            unFlag = false;
        }

    }


})

opsd.onblur = function () {
    let str = this.value;
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/;
    if (str.length !== 0) {
        if (reg.test(str)) {
            otips2.innerHTML = "完成";
            otips2.style.color = "#2c82ff";
            pwFlag = true;
        } else {
            otips2.innerHTML = "密码应为8-16位字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合";
            otips2.style.color = "red";
            pwFlag = false;
        }
    }
    opsd.style.boxShadow = "none";
}

// 点击时添加盒子边框阴影
ouser.addEventListener("click", () => {
    // ouser.style.border = "none";
    ouser.style.boxShadow = " 1px 1px 1px #2c82ff, -1px -1px 1px #2c82ff";

})
ouser.addEventListener("blur", () => {
    ouser.style.boxShadow = "none";
})
opsd.addEventListener("click", () => {
    opsd.style.boxShadow = " 1px 1px 1px #2c82ff, -1px -1px 1px #2c82ff";

})
opsd.addEventListener("blur", () => {
    opsd.style.boxShadow = "none";

})

// input内容为空时，清空提示
ouser.addEventListener("input", () => {
    let str = ouser.value;
    if (str.length === 0) {
        otips1.innerHTML = null;
    }
})
opsd.addEventListener("input", () => {
    let str = opsd.value;
    if (str.length === 0) {
        otips2.innerHTML = null;
    }
})


// 设置可见不可见开关
window.onload = function () {
    let flag = 0;
    oeye1.onclick = function () {
        if (flag === 0) {
            oeye1.className = "iconfont icon-mimakejian";
            opsd.type = "text";
            flag = 1;
        } else {
            oeye1.className = "iconfont icon-mimabukejian";
            opsd.type = "password";
            flag = 0;
        }
    }
}

// 点击nextStep进入下一页

nextStep.addEventListener("click",()=>{
    if(unFlag && pwFlag && ocheck.checked){
        window.location.href = "./register-step02.html";
        localStorage.setItem("username",ouser.value);
        localStorage.setItem("password01",opsd.value);
    }else{
        console.log("未选中");
    }


})

